<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>修饰符</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>测试v-model的修饰符</h3>

        <div id="app">
            <input v-model="username" >
            <p>{{ username }}</p>

            <hr>

            <!-- 使用 lazy 修饰符实现在 change 事件发生时才同步数据  -->
            <input v-model.lazy="nickname" >
            <p>{{ nickname }}</p>

            <hr>

             <!-- 使用 trim 修饰符剔除首尾空白  -->
             <input v-model.trim="password" >
             <p>{{ password }}</p>
             <p>{{ password.length }}</p>

             <hr>

             <hr>

             <!-- 使用 .number 修饰符将 字符串类型自动转换为 number 类型  -->
             <input type="text" v-model.number="price" >
             <p>{{ price }}</p>
             <p>{{ typeof price }}</p>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({
                // 为根组件指定 Data Property
                data(){
                    return {
                        username: '' ,
                        nickname: '' ,
                        password: '' ,
                        price: ''
                    }
                }
            });
            const vm = app.mount( '#app' );
            console.log( vm );
        </script>
        
    </body>
</html>